<template>
  <div class=" app-container">
    <div class="mainbox" style="height:100%;background:#fff;border-radius: 4px;position:relative;margin:16px">

      <div ref="tabledivRef" class="tablediv">
        <div class="msg_item">
          <div class="msgtitle">
            <span>密码定期更新</span>
          </div>
          <div v-if="configData.pwdIsExpired">
            <div class="msgcontent msg_content_flex msg">
              <div class="msgname msg_label">定期更新</div>
              <div class="msg_body">
                <el-radio-group v-model="configData.pwdIsExpired" @change="pwdChange">
                  <el-radio :label="'Y'">开启</el-radio>
                  <el-radio :label="'N'">关闭</el-radio>
                </el-radio-group>
              </div>
            </div>
            <div class="msgcontent msg_content_flex">
              <div class="msgname msg_label">{{ labelObj1.pwdExpiryDate }}</div>
              <div class="msg_body">
                <el-input v-model.number="configData.pwdExpiryDate" :class="{msg_error:!configData.pwdExpiryDate}" :oninput="initPositiveInteger(5)" placeholder="" :disabled="configData.pwdIsExpired=='N'" /><span class="msg_company">天</span>
              </div>
            </div>
            <div class="msgcontent msg_content_flex">
              <el-checkbox v-model="checkbox" :disabled="configData.pwdIsExpired=='N'">
                <div class="msgname msg_label" style="line-height:36px">{{ labelObj1.advanceDays }}</div>
                <div class="msg_body">
                  <el-input v-model.number="configData.advanceDays" :class="{msg_error:(checkbox &&!configData.advanceDays)}" :oninput="initPositiveInteger(5)" placeholder="" :disabled="configData.pwdIsExpired=='N'" /><span class="msg_company" style="font-size:16px;color:#333333">天</span>
                  <span class="msg_tip">说明：系统将在到期前的{{ configData.advanceDays }}天，用户登录时提醒用户更新。</span>
                </div>
              </el-checkbox>
            </div>
            <div v-if="!configData.pwdExpiryDate || (checkbox &&!configData.advanceDays &&configData.pwdIsExpired=='Y' )" class=" msg_error el-form-item__error">
              输入项不能为空
            </div>
          </div>
        </div>
        <div class="msg_item">
          <div class="msgtitle">
            <span>密码强度限制</span>
            <span class="msg_tip">提示：密码最小长度为4位，最大长度为20位</span>
          </div>
          <div class="msgcontent msg_content_flex msg">
            <div class="msgname msg_label">{{ labelObj2.pwdMinLength }}</div>
            <div class="msg_body">
              <el-input v-model.number="configData.pwdMinLength" :class="{msg_error:!configData.pwdMinLength}" :oninput="initPositiveInteger(2)" placeholder="" /><span class="msg_company">位</span>
            </div>
          </div>
          <div class="msgcontent msg_content_flex msg">
            <div class="msgname msg_label">{{ labelObj2.pwdMaxLength }}</div>
            <div class="msg_body">
              <el-input v-model.number="configData.pwdMaxLength" :class="{msg_error:!configData.pwdMaxLength}" :oninput="initPositiveInteger(2)" placeholder="" /><span class="msg_company">位</span>
            </div>
          </div>
          <div class="msgcontent msg_content_flex msg">
            <div class="msgname msg_label">密码字符组成</div>
            <div class="msg_body">
              <el-checkbox-group
                v-model="pwdConstituteTypeArr"
                :min="2"
                :max="3"
              >
                <el-checkbox v-for="item in pwdConstituteArr" :key="item.key" :label="item.key">{{ item.value }}</el-checkbox>
              </el-checkbox-group>
            </div>
          </div>
          <div v-if="!pwdConstituteTypeArr" class=" msg_error el-form-item__error">
            密码字符组成至少包含两种
          </div>
          <div v-if="!configData.pwdMinLength || !configData.pwdMaxLength" class=" msg_error el-form-item__error">
            输入项不能为空
          </div>
          <div v-else-if="parseInt(configData.pwdMinLength) > parseInt(configData.pwdMaxLength)" class=" msg_error el-form-item__error">
            密码最小长度不可大于最大长度
          </div>
          <div v-else-if="configData.pwdMinLength < 4" class=" msg_error el-form-item__error">
            密码最小长度不可小于4位
          </div>
          <div v-else-if="configData.pwdMaxLength > 20" class=" msg_error el-form-item__error">
            密码最大长度不可大于20位
          </div>
        </div>
        <div class="msg_item">
          <div class="msgtitle">
            <span>密码重置</span>
          </div>
          <div>
            <div class="msgcontent msg_content_flex msg">
              <div class="msgname msg_label">{{ labelObj3.defaultReset }}</div>
              <div>
                <el-input v-model="configData.defaultPwd" style="width:490px" :class="{msg_error:!configData.defaultPwd}" :oninput="initPositive(configData.defaultPwd)" placeholder="" maxlength="20" show-word-limit class="limit" />
              </div>
              <div v-if="!configData.defaultPwd" class=" msg_error el-form-item__error">
                请输入默认重置密码
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="glo-topsearch">
        <el-button type="primary" :loading="loading" @click="saveConfig">保存配置</el-button>
        <el-button @click="cancel()">取消</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { positiveInteger } from '@/framework/utils/validate'
import basicData from '@/framework/api/basicData'
import _ from 'lodash' // loadsh插件
export default {
  name: 'PassWordConfig',
  components: {
  },
  data() {
    return {
      radio: 1,
      loading: false,
      pwdConstituteTypeArr: [],
      checkbox: '',
      configData: {
        pwdMinLength: 0, // 密码最小长度(最小下限为6)
        pwdMaxLength: 0, // 密码最大长度（最大上限为20）
        pwdConstituteType: 0, // 密码必要组成类型（1-数字，2-大小写字母，3-特殊字符，4-数字+大小写字母，5-数字+特殊字符，6-大小写字母+特殊字符，7-数字+大小写字母+特殊字符）
        pwdIsExpired: 'N', // 密码是否过期(是-Y，否-N)
        pwdExpiryDate: 8, // 密码有效期(天)，如果是否过期为Y，则该字段必填。
        advanceDays: 3, // 提前通知天数，如果是否通知为Y，则该字段必填。
        defaultPwd: '', // 默认重置密码
        pwdName: '',
        pwdCode: '', // 密码策略编码（默认为Default）
        pwdId: '', // 密码策略ID（默认值1234567890123456789）
        expiredIsInform: '', // 密码过期是否通知(是-Y，否-N)，如果是否过期为Y，则该字段必填。
        pwdRgDescribe: '8-20位，必须包含数字、字母、特殊字符' // 密码规则描述
      },
      checked: false,
      labelObj1:
        {
          'pwdExpiryDate': '密码有效期',
          'advanceDays': '提前提醒天数'
        },
      labelObj2:
        {
          'pwdMinLength': '密码最小长度',
          'pwdMaxLength': '密码最大长度'
        },
      labelObj3: {
        'defaultReset': '默认重置密码'
      },
      pwdConstituteArr: [
        {
          key: 1,
          value: '包含数字'
        },
        {
          key: 2,
          value: '包含大写或小写字母'
        },
        {
          key: 3,
          value: '包含特殊字符'
        }
      ]
    }
  },
  async mounted() {
    await this.initData()
  },
  methods: {
    pwdChange() {
      if (this.configData.pwdIsExpired === 'N') {
        this.checkbox = false
      }
    },
    async initData() {
      const { data } = await basicData.getPwdRules()
      this.configData = data
      if (this.configData.advanceDays !== 0) {
        this.checkbox = true
      } else {
        this.checkbox = false
      }
      this.configData.pwdIsExpired = data.pwdIsExpired
      this.pwdConstituteTypeArr = this.dealPwd(data.pwdConstituteType, 'num')
      // this.pwdConstituteTypeArr = this.configData.pwdConstituteType
    },
    async  saveConfig() {
      if (document.getElementsByClassName('msg_error').length > 0) return
      let con = {}
      con = _.cloneDeep(this.configData)
      con.pwdIsExpired = this.configData.pwdIsExpired
      if (con.pwdIsExpired === 'N') {
        con.advanceDays = 0
      }
      if (!this.checkbox) {
        con.advanceDays = 0
        con.expiredIsInform = 'N'
      } else {
        con.expiredIsInform = 'Y'
      }
      con.pwdConstituteType = this.dealPwd(this.pwdConstituteTypeArr)
      this.loading = true
      try {
        await basicData.updatePwdRules(con)
        await this.initData()
        this.$message.success('配置生效!')
        this.loading = false
      } catch (error) {
        this.loading = false
      }
    },
    dealYN(data) {
      if (data === 'Y') {
        return true
      } else if (data === 'N') {
        return false
      } else if (data) {
        return 'Y'
      } else {
        return 'N'
      }
    },
    dealPwd(data, type) {
      if (type === 'num') {
        let num = []

        switch (data) {
          case 1:
            num = [1]
            break
          case 2:
            num = [2]
            break
          case 3:
            num = [3]
            break
          case 4:
            num = [1, 2]
            break
          case 5:
            num = [1, 3]
            break
          case 6:
            num = [2, 3]
            break
          case 7:
            num = [1, 2, 3]
            break
        }
        return num
      } else {
        let num = 0
        data.sort((a, b) => a - b)
        switch (JSON.stringify(data)) {
          case JSON.stringify([1]):
            num = 1
            break
          case JSON.stringify([2]):
            num = 2
            break
          case JSON.stringify([3]):
            num = 3
            break
          case JSON.stringify([1, 2]):
            num = 4
            break
          case JSON.stringify([1, 3]):
            num = 5
            break
          case JSON.stringify([2, 3]):
            num = 6
            break
          case JSON.stringify([1, 2, 3]):
            num = 7
            break
        }
        return num
      }
    },

    initPositiveInteger(data) {
      return positiveInteger(data)
    },
    initPositive(data) {
      return "value=value.replace(/[^\x00-\xff]/g, '')"
    },
    // // 处理错误提示文案
    // dealErrorLabel() {
    //   let str = ''
    //   let object = {}
    //   object = this.labelObj1
    //   for (const key in object) {
    //     if (Object.hasOwnProperty.call(object, key)) {
    //       if (this.configData.hasOwnProperty(key) && !this.configData.key) {
    //         str += this.labelObj1[key]
    //       } else {
    //         str.replace(this.labelObj1[key], '')
    //       }
    //     }
    //   }
    //   return str
    // },
    cancel() {
      this.initData()
    }

  }
}
</script>
<style lang="scss" scoped>
//密码配置策略页面样式
.tablediv {
  .msg_item{
    position: relative;
    margin-bottom: 20px;
    .msg_content_flex {
      display: flex;
      .msg_body {
        .el-input {
          width: 80px;
          // margin-left: 16px;
        }
        .msg_company {
          margin-left: 12px;
        }
        .el-select {
          .el-input {
            width: 120px;
          }
        }
      }
    }
    .msg_error.el-form-item__error{
      padding-left: 20px;
      z-index: 100;
      margin-top: 8px;
    }
    .msg_error{
      input{

        border-color: #F56C6C;
      }
    }
    .msg_tip{
      font-size: 14px;
      color: #999999;
      font-weight: 400;
      margin-left:24px;
      color:#FFB942;
    }
  }

}
//说明 提示 文本样式
.msg_tip_red{
  font-size: 14px;
  color: #999999;
  font-weight: 400;
}
/* 搜索栏 */
.glo-topsearch{
  padding:0 170px;
  height:80px;
  display: flex;
  align-items: center;
  // justify-content: space-between;
}
.glo-topsearch > div:nth-child(2){
  display: flex;
  overflow: hidden;
}
.top-title{
  position: relative;
  /* border-left:4px solid #5688E8; */
  padding-left: 12px;
  height: 20px;
  color: #666;
  font-weight: bold;
  line-height: 20px;
  margin: 24px 0;
  white-space: nowrap;
  margin-right: 10px;
 }
 .top-title:after{
  position: absolute;
  content:"";
  height: 14px ;
  left: 0;
  top: 3px;
  width: 4px;
  border-left:4px solid #5688E8;
 }
 .top-title-noborder:after{
  border-left:none;
  content:"";
 }
.glo-topsearch .el-input{
  width: 200px;
  margin-right:10px;
}
/* table */
.tablediv{
  position: relative;
  height:calc(100% - 160px);
  padding:0 40px;
  padding-bottom:5px;
}
/* 描述 */
  .tablediv .msgtitle{
    width: 100%;
    height: 64px;
    // background: #fafafa;
    padding-left: 20px;
    box-sizing: border-box;
    color: #333;
    font-weight: bold;
    line-height: 64px;
    border-bottom:solid 1px #efefef;
    padding-bottom: 8px;
  }
  .tablediv .msgcontent{
    width: 100%;
    height: 56px;
    background: #fff;
    padding-left: 20px;
    box-sizing: border-box;
    color: #333;
    line-height: 56px;
    margin-top: 16px;
    // margin-bottom:16px;
    // border-bottom:solid 1px #efefef;
  }
  .tablediv .msg:before{
    content: "*";
    color: #f56c6c;
    margin-right: 4px;
  }
  .tablediv .msgcontent:hover{
     background: #F0F4FB;
  }
  .tablediv .msgcontent .msgname{
    float: left;
    color:#999;
    // width: 176px;
  }
  .tablediv .msgcontent .msg_label{
    float: left;
    font-weight: 400;
    font-size: 14px;
    color: #333333;
    padding-right: 16px;
    // line-height: 56px;
    // margin-bottom: 16px;
  }
  .tablediv .msgcontentdes{
    display: inline-block;
    width:calc(100% - 200px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  // .el-checkbox__label{
  //   line-height: 56px;
  // }
</style>
